<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
 * Freshlr Personal Site v1.7
 * http://themeforest.net/item/freshlr-personal-onepage-site-template/127866
 *
 * Copyright (c) 2010-2011 Amatyr4n
 * http://themeforest.net/user/amatyr4n?ref=amatyr4n
 *
 * licensed under Envato licenses
 * http://wiki.envato.com/support/legal-terms/licensing-terms/
 *
  _____ _                 _           __                                   _               _               /\ /\ 
 |_   _| |__   __ _ _ __ | | _____   / _| ___  _ __   _ __  _   _ _ __ ___| |__   __ _ ___(_)_ __   __ _  |/\|/\|
   | | | '_ \ / _` | '_ \| |/ / __| | |_ / _ \| '__| | '_ \| | | | '__/ __| '_ \ / _` / __| | '_ \ / _` |        
   | | | | | | (_| | | | |   <\__ \ |  _| (_) | |    | |_) | |_| | | | (__| | | | (_| \__ \ | | | | (_| |        
   |_| |_| |_|\__,_|_| |_|_|\_\___/ |_|  \___/|_|    | .__/ \__,_|_|  \___|_| |_|\__,_|___/_|_| |_|\__, |        
                                                     |_|                                           |___/         
                                                                      
 *  Feel free to EDIT/REMOVE these lines, EVERY single characters within this file.
 *
 *  PS: just in case, if you got this from a ripped file, it wouldn't hurt if you thank me by purchasing this item
 *
 *	─ Amatyr4n
-->

<html   xmlns="http://www.w3.org/1999/xhtml" 
        xmlns:og="http://ogp.me/ns#"
        xmlns:fb="http://www.facebook.com/2008/fbml"
        lang="en" 
        xml:lang="en">

    <head>

        <!-- Site Title -->
        
            <title>Matthew Allen</title>

        <!-- Meta tags -->
        
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <meta http-equiv="Content-Style-Type" content="text/css" /> 
            <meta http-equiv="Content-Script-Type" content="text/javascript" />

            <meta name="description" content="Freshlr Personal One-page Site by Amatyr4n" />
            <meta name="keywords" content="Site Template, Personal, One-page, HTML, CSS, JavaScript, jQuery, PHP" />
            <meta name="author" content="Matthew Allen" />
            <meta name="company" content="Matthew Allen" />
            <meta name="designer" content="Matthew Allen" />
            
            <!-- Opengraph protocol. See http://ogp.me/ -->
            <meta property="og:title" content="Freshlr Personal One-page Site by Amatyr4n" />
            <meta property="og:type" content="profile" />
            <meta property="og:url" content="http://amatyr4n.com/themeforest/freshlr/" />
            <meta property="og:image" content="http://amatyr4n.com/themeforest/freshlr/images/thumb9.jpg" />
            
            <!-- commented, only if used for FB page, see http://developers.facebook.com/docs/opengraph/
            <meta property="fb:admins" content="YOUR_USER_ID"/>
            end of comment -->
            
        <!-- Stylesheet: -->

            <!-- REQUIRED - CSS reset -->
            <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
            
            <!-- REQUIRED - Freshlr Custom CSS -->
            <link rel="stylesheet" type="text/css" href="css/freshlr-style.css" media="screen" />

            <!-- Change as you wish - Custom font -->
            <link id="css-font" rel="stylesheet" type="text/css" href="css/font/bebas-news.css" media="screen" />
            <link rel="stylesheet" type="text/css" href="fonts/Bebas-Neue-fontfacekit/stylesheet.css" media="screen" />
            
            <!-- Change as you wish - For jQuery plugin -->
            <link rel="stylesheet" type="text/css" href="css/jquery-coda-slider.css" media="screen" />
            <link rel="stylesheet" type="text/css" href="css/jquery-fancybox.css" media="screen" />
            <link rel="stylesheet" type="text/css" href="css/jquery-tiptip.css" media="screen" />
            
            <!-- Change as you wish - Color shown when page get loaded & fallback if no JavaScript present -->                      
            <link id="css-foreground" rel="stylesheet" type="text/css" href="css/color/freshlr-color-red-brown.css" media="screen" />
            <link id="css-background" rel="stylesheet" type="text/css" href="css/background/freshlr-background-red-brown.css" media="screen" />

        <!-- Favicons: -->
                              
            <!-- Will be displayed in most browsers other than IE -->
            <link rel="icon" type="image/png" href="images/icons/vector-social-media/32px/facebook.png" />
                   
            <!-- commented, remove this line to use IE & iOS favicons            
            <link rel="shortcut icon" href="images/icons/favicon.ico" />
            <link rel="apple-touch-icon" href="images/icons/ios-icon.png" />            
            end of comment -->

        <!-- JavaScript -now moved to footer -->

    </head>

    <body>

	<!-- BEGIN MAIN -->

	<div id="wrapper">

	    <!-- BEGIN SOCIAL BAR SECTION 
  ____             _       _   ___                        
 / ___|  ___   ___(_) __ _| | |_ _|___ ___  _ __  ___   _ 
 \___ \ / _ \ / __| |/ _` | |  | |/ __/ _ \| '_ \/ __| (_)
  ___) | (_) | (__| | (_| | |  | | (__ (_) | | | \__ \  _ 
 |____/ \___/ \___|_|\__,_|_| |___\___\___/|_| |_|___/ (_)

	    -->

            <ul id="social_icons">

		        <li>
                    <a  href="http://matt12allen.tumblr.com/" 
                        class="social32 rss_icon32" rel="me"
                        title="subscribe to my blog feed">
                    </a>
		        </li>
		                    
            	<li>
		            <a  href="http://www.facebook.com/matt12allen" 
		                class="social32 facebook_icon32" rel="me"
		                title="be my friend, share what you like">
		            </a>
		        </li>

		        <li>
		            <a  href="http://twitter.com/matt12allen" 
		                class="social32 twitter_icon32" rel="me"
		                title="follow me, and i'll follow you back">
		            </a>
		        </li>

		        <!--
		        <li>
		            <a  href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" 
		                class="social32 ym_icon32" rel="me"
		                title="do you yahoo? let's chat :)">
		            </a>
		        </li>
		        -->

		        <li>
		            <a  href="mailto:matt12allen@me.com?subject=Website" 
		                class="social32 email_icon32" 
		                title="wanna say hello? send me a message right to my email">
		            </a>
		        </li>
		        
		        <!--
		        <li>
		            <a  href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" 
		                class="social16 googletalk_icon16" rel="me"
		                title="i have an idea, talk with me">
		            </a>
		        </li>

		        <li>
		            <a  href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" 
		                class="social16 linkedin_icon16" rel="me"
		                title="get connected">
		            </a>
		        </li>

		        <li>
		            <a  href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" 
		                class="social16 myspace_icon16" rel="me"
		                title="share the fun">
		            </a>
		        </li>

		        <li>
		            <a  href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" 
		                class="social16 tumblr_icon16" 
		                title="read my little notes, always updated daily">
		            </a>
		        </li>

		        <li>
		            <a  href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" 
		                class="social16 wordpress_icon16" rel="me"
		                title="i'm sharing my mind here">
		            </a>
		        </li>
		        -->

		        <li>
		            <a  href="http://activeden.net/user/amatyr4n?ref=amatyr4n" 
		                class="social32 lastfm_icon32" rel="me"
		                title="jazz lover, dangdut addict">
		            </a>
		        </li>

		        <!--
		        <li>
		            <a  href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" 
		                class="social32 deviantart_icon32" rel="me"
		                title="my art collection, you may download some─most of it─for free">
		            </a>
		        </li>
		        -->

		        <li>
		            <a  href="http://www.youtube.com/user/matt2712" 
		                class="social32 youtube_icon32" rel="me"
		                title="view my public channel">
		            </a>
		        </li>

		        <li>
		            <a  href="skype:matt12allen?call" 
		                class="social32 skype_icon32" rel="me"
		                title="call me anytime─except now">
		            </a>
		        </li>
		        
		        <li>
		            <a  href="http://www.flickr.com/matthewallen12/" 
		                class="social32 flickr_icon32" rel="me"
		                title="my photo collection, come on see it!">
		            </a>
		        </li>
		        
		        <!--
		        <li>
		            <a  href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" 
		                class="social32 blogger_icon32" rel="me"
		                title="visit my main blog here in blogspot">
		            </a>
		        </li>
		        -->

	      </ul><!-- end ul#social_icons -->

	    <!-- END SOCIAL BAR SECTION -->


	<!-- BEGIN HEADER 
  _   _                _               
 | | | | ___  __ _  __| | ___ _ __   _ 
 | |_| |/ _ \/ _` |/ _` |/ _ \ '__| (_)
 |  _  |  __/ (_| | (_| |  __/ |     _ 
 |_| |_|\___|\__,_|\__,_|\___|_|    (_)

	-->

	<div id="header">
	    <h1 id="title">
	        <a href="index.html">
                <!-- Header title -->
                Matt Allen
            <!-- You can use alternative image for header instead of using text, remove this line to use image as header
                
                <img src="images/header.png" alt="logo" /> 
                
                remove this line to use image as header -->
            </a>
	    </h1><!-- end h1 #title -->
        <h4 id="tagline">My Website</h4>
        
        <span id="tweet-button"></span>
        <span id="like-button"></span>
        
	</div><!-- end div #header -->

	<!-- END HEADER -->

	    <div class="coda-slider-wrapper">

		<!-- BEGIN SIDEBAR 
  ____  _     _      _                    
 / ___|(_) __| | ___| |__   __ _ _ __   _ 
 \___ \| |/ _` |/ _ \ '_ \ / _` | '__| (_)
  ___) | | (_| |  __/ |_) | (_| | |     _ 
 |____/|_|\__,_|\___|_.__/ \__,_|_|    (_)
                                          
		-->

		<div id="aside">
		    <div class="coda-nav" id="coda-nav-1">
			<ul>
			    <li class="tab1">
				<a href="#home" id="tab-home" title="Go to home page">

				    Home     

				</a>
			    </li>
			    <li class="tab2">
				<a href="#about" id="tab-about" title="Know more about me">

				    About      

				</a>
			    </li>
			    <li class="tab3">
				<a href="#portfolio" id="tab-portfolio" title="See my previous works">

				    Portfolio

				</a>
			    </li>
			    <li class="tab4">
				<a href="#services" id="tab-services" title="Let's solve the problem">

				    Services

				</a>
			    </li>
			    <li class="tab5">
				<a href="#contact" id="tab-contact" title="Get in touch with me">

				    Contact  

				</a>
			    </li>			    
			</ul>
		    </div><!-- end div #coda-nav-1 -->
		</div><!-- end div #aside -->

		<!-- END SIDEBAR -->

		<div class="coda-slider preload" id="coda-slider-5">

	    <!-- BEGIN HOME PAGE 
  _   _                          
 | | | | ___  _ __ ___   ___   _ 
 | |_| |/ _ \| '_ ` _ \ / _ \ (_)
 |  _  | (_) | | | | | |  __/  _ 
 |_| |_|\___/|_| |_| |_|\___| (_)

	    -->

		    <div class="panel" id="home">
			<div class="panel-wrapper">

				<h3 class="page_title">

				    Howdy!

				</h3>

			    <!-- home page content begins here: -->

                
                <div class="one-third">		          
		          <p>
			      My name is Matthew Allen and welcome to my personal website! I mainly work as a designer on game projects but also specialize a bit more as a level designer. The game I am currently working on as part of a team is Moonopolise, a turn based tactical espinoage action game based on evidence that cows are taking over the world! As well as being a game designer I also create iOS apps and web services such a Tripr, you can <a href="#portfolio" title="click me" class="xtrig">view my portfolio</a> to see what I am currently up to.
		          </p>
		                              
                    
	                            
                </div><!-- end div .one-third -->

                <div class="one-third">
			   
               <h4>Last Tweet</h4>             
                    <div id="twitter-feed"></div>
                    
                </div><!-- end div .one-third -->

                <div class="one-third">
                    <h4>News</h4>
				    <ul>
				      <li>			          My review of the Apple Magic Trackpad will be live on my blog within the next week! -27 Aug '11-
			          </li>
				      <li>			          The website is now Live! -24 Aug '11-
			          </li>
                     
       
			      </ul>
</div><!-- end div .one-third -->
                
			    <!-- home page content ends here: -->

			    <div class="whitespace"></div>
			</div>
		    </div><!-- end div #home -->

	    <!-- END HOME PAGE -->

	    <!-- BEGIN ABOUT PAGE
     _    _                 _       
    / \  | |__   ___  _   _| |_   _ 
   / _ \ | '_ \ / _ \| | | | __| (_)
  / ___ \| |_) | (_) | |_| | |_   _ 
 /_/   \_\_.__/ \___/ \__,_|\__| (_)

	    -->

		   <div class="panel" id="about">
		      <div class="panel-wrapper">

			      <h3 class="page_title">
		      
				  About Me
		  
			      </h3>

			  <div class="two-third">
			  <!-- about page content begins here: -->

			      <img class="shadow leftpic" src="images/me.jpg" alt="profile" title="Hey, it's me" />

			      <p>
				  My name is Matthew Allen and I study Computer Games Technology at The University of Portsmouth. I am currently in my second year and specializing a design route on the course rather than programming. If you click on my portfolio you will see some of my work that I have done at university.
			      </p>
			      <p>
				  I have several other projects that I am working on outside of education including Tripr, a social networking app I am developing which collects numerous data from any trips friends and family go on and allows users to share the trip whith everyone else! I am also working on a game which started as a University project but the team and myself believe could be a very sucessful game. For more information check out the projects page. 
			      </p>

			      <h4>Other Interests</h4>

			      <p>
				  I have many interests and passions; I absolutely love technology and dont think I could function without my iPhone! I also love gaming, catching up with the latest industry news almost constently and regulary attending Expos. I have a keen intrest in photography, movies, tv, music and video production.  
			      </p>	
			    
			      <h4>At the moment I'm...</h4>

			      <p>
				 working part time at my local co-op when I'm not at university as well as working on several projects. I am also currently writting some reviews that will be published on my blog and editing some videos that will be on YouTube. To keep up to date with what I am doing use the social links at the top of my website to follow me using various forms of social networking!  
			      </p>	
			            
			  </div><!-- end div .one-half -->

			  <div class="one-third">
			    
			        <h4>Skill</h4>	
			        		      
				    <ul class="icon-check">
				      <li>
				       
				        Graphic Design
				       
				      </li>
				      <li>
				        Video Editing
				      </li>
				      <li>
				        Modelling 
				      </li>
				      <li>
				       Computer Game Level Design
				      </li>
                      <li>
				      Xcode Development
				      </li>
			    </ul>

			        <h4>Work</h4>
			        
				    <ul class="icon-work">
				      <li>
				        Aggregate Industries Web design (Work Exp)
				      </li>
				   
				    </ul>

			        <h4>Education</h4>
			        
				    <ul class="icon-education">
				      <li>
				        University of Portsmouth
				      </li>
				      <li>
				        Oxford and Cherwell Valley College
				      </li>
				      <li>
				        Burford School and Community College
				      </li>
				     
				    </ul>
				
			      <h4>Curicullum Vitae</h4>
			      <p>
				  There, you can download my resume from this <a href="http://public.iwork.com/document/?a=p1323060904&d=CV.pages" title="click to download">link</a>
			      </p>

			    <!-- about page content ends here: -->
			  </div><!-- end div .one-half -->
			  <div class="whitespace"></div>
		      </div>
		  </div><!-- end div #about -->

	    <!-- END ABOUT PAGE -->

	    <!-- BEGIN PORTFOLIO PAGE 
  ____            _    __       _ _           
 |  _ \ ___  _ __| |_ / _| ___ | (_) ___    _ 
 | |_) / _ \| '__| __| |_ / _ \| | |/ _ \  (_)
 |  __/ (_) | |  | |_|  _| (_) | | | (_) |  _ 
 |_|   \___/|_|   \__|_|  \___/|_|_|\___/  (_)
                                              
	    -->

		  <div class="panel" id="portfolio">
		      <div class="panel-wrapper">

			      <h3 class="page_title">

				  Recent Works

			      </h3>

			  <div class="one-full">
			  <!-- portfolio page content begins here: -->

			      <p>Ea cetero oportere mei, iudico aperiam erroribus no vis. Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius. Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros.
			      </p>

			      <!-- BEGIN GALLERY SECTION -->

			      <ul class="gallery">
				      <li>
				          <a    href="images/photos/book04.jpg" rel="freshlr-gallery" 
				                title="Ea cetero oportere mei, iudico aperiam erroribus no vis.">
					      <img  class="shadow centerpic" src="images/photos/thumb_book04.jpg" width="128" height="96" 
					            alt="Tibique assentior at his, has te hinc maiestatis repudiandae." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book01.jpg" rel="freshlr-gallery" 
				                title="Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros.">
					      <img  class="shadow centerpic" src="images/photos/thumb_card07.jpg" width="128" height="96" 
					            alt="Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book04.jpg" rel="freshlr-gallery" 
				                title="Ea cetero oportere mei, iudico aperiam erroribus no vis.">
					      <img  class="shadow centerpic" src="images/photos/thumb_card01.jpg" width="128" height="96" 
					            alt="Tibique assentior at his, has te hinc maiestatis repudiandae." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book01.jpg" rel="freshlr-gallery" 
				                title="Ea cetero oportere mei, iudico aperiam erroribus no vis.">
					      <img  class="shadow centerpic" src="images/photos/thumb_book06.jpg" width="128" height="96" 
					            alt="Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book04.jpg" rel="freshlr-gallery" 
				                title="Ea cetero oportere mei, iudico aperiam erroribus no vis.">
					      <img  class="shadow centerpic" src="images/photos/thumb_moo04.jpg" width="128" height="96" 
					            alt="Tibique assentior at his, has te hinc maiestatis repudiandae." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book01.jpg" rel="freshlr-gallery" 
				                title="Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros.">
					      <img  class="shadow centerpic" src="images/photos/thumb_book01.jpg" width="128" height="96" 
					            alt="Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book04.jpg" rel="freshlr-gallery" 
				                title="Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros.">
					      <img  class="shadow centerpic" src="images/photos/thumb_moo01.jpg" width="128" height="96" 
					            alt="Tibique assentior at his, has te hinc maiestatis repudiandae." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book01.jpg" rel="freshlr-gallery" 
				                title="Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros.">
					      <img  class="shadow centerpic" src="images/photos/thumb_leaflet01.jpg" width="128" height="96" 
					            alt="Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book04.jpg" rel="freshlr-gallery" 
				                title="Ea cetero oportere mei, iudico aperiam erroribus no vis.">
					      <img  class="shadow centerpic" src="images/photos/thumb_leaflet02.jpg" width="128" height="96" 
					            alt="Tibique assentior at his, has te hinc maiestatis repudiandae." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book01.jpg" rel="freshlr-gallery" 
				                title="Ea cetero oportere mei, iudico aperiam erroribus no vis.">
					      <img  class="shadow centerpic" src="images/photos/thumb_leaflet04.jpg" width="128" height="96" 
					            alt="Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book04.jpg" rel="freshlr-gallery" 
				                title="Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros.">
					      <img  class="shadow centerpic" src="images/photos/thumb_book07.jpg" width="128" height="96" 
					            alt="Tibique assentior at his, has te hinc maiestatis repudiandae." />
				          </a>
				      </li>
				      <li>
				          <a    href="images/photos/book01.jpg" rel="freshlr-gallery" 
				                title="Ea cetero oportere mei, iudico aperiam erroribus no vis.">
					      <img  class="shadow centerpic" src="images/photos/thumb_moo02.jpg" width="128" height="96" 
					            alt="Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius." />
				          </a>
				      </li>
			      </ul>
			  </div><!-- end div .one-full -->
			      <!-- END GALLERY SECTION -->

                <div class="clear"></div>
                
                <div class="one-half">
                    <p>Ea cetero oportere mei, iudico aperiam erroribus no vis. Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius. Mei error corpora ei, ne virtute albucius suscipit sea.
			        </p>
                </div>
                
                <div class="one-half">
                    <p>Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius. Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros.
			        </p>
                </div>

			  <!-- portfolio page content ends here: -->
			  <div class="whitespace"></div>
		      </div>
		  </div><!-- end div #portfolio -->

	    <!-- END SOCIAL BAR SECTION -->

	    <!-- BEGIN SERVICES PAGE 
 ____                  _               
/ ___|  ___ _ ____   _(_) ___ ___  ___ 
\___ \ / _ \ '__\ \ / / |/ __/ _ \/ __|
 ___) |  __/ |   \ V /| | (_|  __/\__ \
|____/ \___|_|    \_/ |_|\___\___||___/
                                                                                   
	    -->

		  <div class="panel" id="services">
		      <div class="panel-wrapper">

			      <h3 class="page_title">

				  Services

			      </h3>

		          <div class="one-half aligncenter">
			          
			          <h4>Plans &amp; Pricing</h4>
			          
			          <table>
		                <tr>
		                    <th></th>
		                    <th>Free</th>
		                    <th>Starter</th>
		                    <th>Basic</th>
		                    <th>Premium</th>
		                </tr>
		                <tr>
		                    <td>Monthly</td>
		                    <td>$0</td>
		                    <td>$5</td>
		                    <td>$49</td>
		                    <td>$499</td>
		                </tr>
		                <tr>
		                    <td>Account</td>
		                    <td>1</td>
		                    <td>10</td>
		                    <td>100</td>
		                    <td>1000+</td>
		                </tr>
		                <tr>
		                    <td>Storage</td>
		                    <td>50MB</td>
		                    <td>1GB</td>
		                    <td>20GB</td>
		                    <td>1000GB+</td>
		                </tr>
		                <tr>
		                    <td>Support</td>
		                    <td>-</td>
		                    <td>Call</td>
		                    <td>24/7</td>
		                    <td>Priority</td>
		                </tr>
			          </table>
			          
			          <button>Sign-up &raquo;</button>
			          
			          <p><sub>* Terms &amp; conditions apply</sub></p>		    
			          
			      
			      </div><!-- end div .one-half -->

			      <div class="one-half">    
			      
			          <h4>One-half</h4>
			          <p>
				      Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros. Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur. Tibique assentior at his, has te hinc maiestatis repudiandae.
			          </p>
			          
			          <p>
			          Tibique <strong>assentior at his</strong>, <a href="#">has te hinc</a> <em>maiestatis repudiandae</em>. <del>Pro mucius officiis dissentias ei,</del> <ins>quo salutandi constituam ut,</ins> te pri viderer numquam ceteros. <abbr title="similique et sea">Aliquid accumsan similique et sea</abbr>, oporteat petentium <sub>cu mei</sub>, pro ei <sup>audiam utamur</sup>. 
			          </p>
			          			          			          			          		                          			          
                  </div><!-- end div .one-half -->

			      <div class="one-full">    
			      
			          <h4>One-full</h4>			                          
			          <p>
				      Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros. Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur. Tibique assentior at his, has te hinc maiestatis repudiandae.
			          </p>
			          
                  </div><!-- end div .one-full -->
                  
			      <div class="one-third">    
			      
			          <h4>One-third</h4>			                          
			          <p>
				      Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros.
			          </p>

		                <form action=""> 
		                    <fieldset>
		                        <legend>Form elements</legend>
		                            <input type="text" value="Text" /><br/>
		                            <input type="password" value="Password"/><br/>
		                            <input type="file" /><br/>
		                            <input type="checkbox" /><label>Checkbox</label><br/>
		                            <input type="radio" /><label>Radiobutton</label><br/>
		                            <textarea rows="" cols="">Textarea</textarea><br/>
		                            <select><option value="1">Select</option><option value="2">Value 2</option><option value="3">Value 3</option></select><br/>
			                        <input type="submit" value="Submit" />
			                        <button>Button</button>
		                    </fieldset> 
		                </form> 
		            			          
                  </div><!-- end div .one-third -->

			      <div class="two-third">    
			      
			          <h4>Two-third</h4>			          
			          <p>
				      Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros. Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur. Tibique assentior at his, has te hinc maiestatis repudiandae.
			          </p>
			                          
			          <h5>Image on the left side</h5>			          
			          <p>
			          <img class="shadow leftpic" src="images/photos/thumb_moo01.jpg" width="128" height="96" alt="ini buku" title="ini buku" />
				      Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros. Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur. Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur.
			          </p>
			          
			          <h5>Image on the right side</h5>			          
			          <p>
			          <img class="shadow rightpic" src="images/photos/thumb_book07.jpg" width="128" height="96" alt="ini juga buku" title="ini juga buku" />
				      Ea cetero oportere mei, iudico aperiam erroribus no vis. Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius.
			          </p>
			          
			          <h5>Fancybox support</h5>			          
			          <p>
			          <a href="images/photos/book01.jpg"><img src="images/photos/thumb_moo01.jpg" width="128" height="96" alt="ini juga buku" title="ini juga buku" /></a>
				      Ea cetero oportere mei, iudico aperiam erroribus no vis. Mei error corpora ei, ne virtute albucius suscipit sea. Quo ne eripuit iracundia gloriatur, et mea unum eius.
			          </p>			          		            
			    
                  </div><!-- end div .two-third -->                  

                  <div class="clear"></div>
                			      
			      <div class="two-third">
			            
			          <h6>Heading 6</h6>			          
                      <h5>Heading 5</h5>
                      <h4>Heading 4</h4>
                      <h3>Heading 3</h3>
                      <h2>Heading 2</h2>
                      <h1>Heading 1</h1>
                                         
                      <blockquote>A minimalist design is not the same as a simple one, neither this dummy quote. - Amatyr4n (1988)</blockquote>
                      
                  </div><!-- end div .two-third -->  

			      <div class="one-third">

			          <h4>One-third</h4>
			          <p>
				      Pro mucius officiis dissentias ei, quo salutandi constituam ut, te pri viderer numquam ceteros. Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur. Tibique assentior at his, has te hinc maiestatis repudiandae.
			          </p>
			            <ul> 
				            <li>Unordered list test</li> 
				            <li>Another list element.</li> 
				            <li>Yet another element in the list</li>
			            </ul> 
			            <ol> 
				            <li>Ordered list test</li> 
				            <li>Another list element</li> 
				            <li>Yet another element in the list</li> 
			            </ol> 

			          
                  </div><!-- end div .one-third -->  
                  
                  <div class="clear"></div>

			      <div class="one-third">
			          <h4>One-third</h4>
			          <p>
			          Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur. Tibique assentior at his, has te hinc maiestatis repudiandae.
			          </p>
			          <ul class="icon-check"> 
				          <li>Unordered list test</li> 
				          <li>Another list element.</li> 
				          <li class="icon-uncheck">Yet another element in the list</li>
			          </ul>
			          <ul class="icon-plus"> 
				          <li>Unordered list test</li> 
				          <li>Another list element.</li> 
				          <li class="icon-minus">Yet another element in the list</li>
			          </ul>  
			      </div>

			      <div class="one-third">
			          <h4>One-third</h4>
			          <p>
			          Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur. Tibique assentior at his, has te hinc maiestatis repudiandae.
			          </p>
			          <ul class="icon-pic"> 
				          <li>Unordered list test</li> 
				          <li>Another list element.</li> 
				          <li>Yet another element in the list</li>
			          </ul> 			          
			          <ul class="icon-user"> 
				          <li>Unordered list test</li> 
				          <li>Another list element.</li> 
				          <li>Yet another element in the list</li>
			          </ul>
			      </div>
			      
			      <div class="one-third">
			          <h4>One-third</h4>
			          <p>
			          Aliquid accumsan similique et sea, oporteat petentium cu mei, pro ei audiam utamur. Tibique assentior at his, has te hinc maiestatis repudiandae.
			          </p>
			          <ul class="icon-docs"> 
				          <li>Unordered list test</li> 
				          <li>Another list element.</li> 
				          <li>Yet another element in the list</li>
			          </ul>
			          <ul class="icon-config"> 
				          <li>Unordered list test</li> 
				          <li>Another list element.</li> 
				          <li>Yet another element in the list</li>
			          </ul>			           
			      </div>

			  <div class="whitespace"></div>

		      </div>
		  </div><!-- end div #services -->

	    <!-- END SERVICES PAGE -->

	    <!-- BEGIN CONTACT PAGE 
   ____            _             _       
  / ___|___  _ __ | |_ __ _  ___| |_   _ 
 | |   / _ \| '_ \| __/ _` |/ __| __| (_)
 | |___ (_) | | | | |_ (_| | (__| |_   _ 
  \____\___/|_| |_|\__\__,_|\___|\__| (_)
                                         
	    -->

		  <div class="panel" id="contact">
		      <div class="panel-wrapper">

			      <h3 class="page_title">

				  Contact Me

			      </h3>

			  <!-- contact page content begins here: -->
			      
			  <div class="one-full">
			  
			    <div id="map">loading...</div>
			    
			  </div><!-- end div .one-full -->
			  
			  <div class="clear"></div>

			  <div class="two-third">

			      <p>
				  If you want to send me a message, you can use this form:
			      </p>

			      <form id="contactform" action="php/freshlr-mail.php" method ="post"> 
				      <div id="response"></div>
				      <input type="text" name="name" id="contact_name" value="Name" /><br />
				      <input type="text" name="mail" id="contact_mailfrom"  value="e-mail" /><br />
				      <input type="text" name="subject" id="contact_subject"  value="Subject" /><br />
				      <textarea name="text" id="contact_text" cols="40" rows="10"></textarea><br />
				      <input type="submit" value="Submit" id="sendmail" name="sendmail" />	
			      </form>      

			  </div><!-- end div .two-third -->

			  <div class="one-third">
              
              <h4>Or you can use the social icons at the top of the page!</h4>
              
			    <!--
                <h4>Office</h4>
			    <p>Gang H. Samsudin No.32
				    <br />Jalan Antah Berantah IX
				    <br />Bandung, Indonesia
				</p>
			    <h4>Phone</h4>
				<p>+62 812 235 53622
				    <br />+62 22 997 62174
			    </p>
                -->

			  </div><!-- end div .one-third -->
			  
			  <!-- contact page content ends here: -->
			  <div class="whitespace"></div>

		      </div>
		  </div><!-- end div #contact -->

	    <!-- END CONTACT PAGE -->

	      </div><!-- .coda-slider -->
	  </div><!-- .coda-slider-wrapper -->

	    <!-- BEGIN BOTTOM COLUMNS 
   ____      _                               
  / ___|___ | |_   _ _ __ ___  _ __  ___   _ 
 | |   / _ \| | | | | '_ ` _ \| '_ \/ __| (_)
 | |___ (_) | | |_| | | | | | | | | \__ \  _ 
  \____\___/|_|\__,_|_| |_| |_|_| |_|___/ (_)

	    -->

	  <div id="bottom_column">
	      <div class="two-third">

		      <h4>Do you Like?</h4>
		      <p>I hope you like my site aswell as the projects I am currently working on! If you have any sort of feedback, good or bad, i'd love to hear from you by using the social icons at the top of the page!</p>

		      <h4>Blockquote</h4>
		      <blockquote class="white">A minimalist design is not the same as a simple one, neither this dummy quote. -Amatyr4n (1988)-</blockquote>
		      
	          </div>

	      <div class="one-third">

		  <h4>Currently working on</h4>
		  
		  <ul>
		    <li>
			<a href="http://3docean.net/user/amatyr4n?ref=amatyr4n" title="Social Networking App">
			    Tripr
			</a>
		    </li>
		    <li>
			<a href="http://activeden.net/user/amatyr4n?ref=amatyr4n" title="Tactical Espionage Action Game">
			    Moonopolise
			</a>
          <!--
		    </li>
		    <li>
			<a href="http://audiojungle.net/user/amatyr4n?ref=amatyr4n" title="Music loops and Sound Effects">
			    Audiojungle
			</a>
		    </li>
		    <li>
			<a href="http://codecanyon.net/user/amatyr4n?ref=amatyr4n" title="PHP, JS, Java and .NET">
			    Codecanyon
			</a>
		    </li>
		    <li>
			<a href="http://graphicriver.net/user/amatyr4n?ref=amatyr4n" title="Photoshop, Vectors, and Icons">
			    Graphicriver
			</a>
		    </li>
		    <li>
			<a href="http://themeforest.net/user/amatyr4n?ref=amatyr4n" title="Site Templates and Themes">
			    Themeforest
			</a>
		    </li>
		    <li>
			<a href="http://videohive.net/user/amatyr4n?ref=amatyr4n" title="Stock Motion Graphics">
			    Videohive
                -->
			</a>
		    </li>
		  </ul>
	    
	      </div>
	      <div class="whitespace"></div>

	  </div><!-- end div #bottom_column -->

	    <!-- END BOTTOM COLUMNS -->

		<div id="bottom_icon" title="Hello, visitor :)"></div>

      </div><!-- end div #wrapper -->

      <!-- END MAIN -->

      <!-- BEGIN FOOTER 
  _____           _                
 |  ___|__   ___ | |_ ___ _ __   _ 
 | |_ / _ \ / _ \| __/ _ \ '__| (_)
 |  _| (_) | (_) | |_  __/ |     _ 
 |_|  \___/ \___/ \__\___|_|    (_)
                                   
      -->

      <div id="footer">

	  <p>
	      Copyright © 2010-2011 All Rights Reserved by Matthew Allen | Site designed by Matthew Allen.<br />
	  </p>

      </div><!-- end div #footer -->

      <!-- END FOOTER -->

        <!-- jQuery plugins: -->

            <!-- REQUIRED - jQuery library -->            
            <!-- load jQuery from local file -->
            <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>            
            <!-- you can remove above script & uncomment line below if you prefer to load jQuery from Google CDN -->
            <!--
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            -->
                        
            <!-- REQUIRED - feature detection & script loader -->
            <script type="text/javascript" src="js/modernizr-2.0.min.js"></script>
            
            <!-- REQUIRED - main script -->
            <script type="text/javascript" src="js/freshlr-script.js"></script>            
            <script type="text/javascript">
            //<![CDATA[
            
                // Feel free to change default configurations here --just don't remove those commas!     
                var settings = {
                                // pick a color from predefined colors
                                backgroundColor    : 'red-brown'
                                ,foregroundColor    : 'red-brown'                                          
                                // predefined colors are:
                                // blue, brown-green, dark-blue, dark-green, chocolate
                                // dark-purple, dark-red, light-blue, magenta
                                // orange, red-brown, or yellow-blue, grey, silver
                                 
                                ,slideType         : 'default'
                                // predefined slide types are:
                                // elastic, bounce, back, scroll, or default
                                                                 
                                // set property to TRUE or FALSE to enable/disable certain features
                                ,enableAjaxForm     : true  // if false, fallback to standard HTTP post
                                ,enableFancybox     : true  // a with href=*.jpg/*.png & has img
                                ,enableTooltip      : true  // extracted from title attribute
                                ,enableTweetButton  : true  // span with id="tweet-button"
                                ,enableLikeButton   : true  // span with id="like-button"
                                ,enableTwitterFeed  : true  // div with id="twitter-feed"
                                ,enableGoogleMaps   : true  // div with id="map"
                                ,animateSidebar     : true
                                
                                // settings for Google Maps if enabled
                                // for complete list of options, see http://github.com/fridek/gmap/
                                ,gMapSettings       : {
                                                        latitude    : 50.784491
                                                        ,longitude  : -1.070395
                                                        ,zoom       : 16
                                                      }
                                
                                // settings for twitter feed if enabled
                                // for complete list of options, see http://github.com/sergiomartino/jQuery-LiveTweet
                                ,twitterFeedSettings : {
                                                        username       : 'matt12allen'
                                                        ,limit          : 3
                                                        ,error_text     : '<p>Follow me <a href="http://twitter.com/#!/matt12allen">@matt12allen</a></p>'
                                                      }
                                                      
                                // settings for Google Analytics, replace with your analytics code
                                ,googleAnalytics    : 'UA-xxxxxx-yy'
                                
                                // contact form settings here
                                ,contact_name       : 'Name'
                                ,contact_mailfrom   : 'e-mail'
                                ,contact_subject    : 'Subject'
                                ,invalid_name       : 'Please enter your name'
                                ,invalid_mailfrom   : 'Please supply a valid e-mail address'
                                ,invalid_subject    : 'Please fill in the subject'
                                ,invalid_text       : 'What do you want to say?'
                                ,sending_message    : 'Sending message...'
                                ,error_message      : 'Sorry, there\’s something error when sending the message. '
                                                        + 'No worries though, you still can send me an e-mail'
                                                        + ': youremail@yourdomain.com'    // only if you want to show publicly
                };
                
                // execute script within freshlr-script.js
                $(document).ready(function(){
                    initFreshlr(settings);
                });
                
            // close CDATA
            //]]>
            </script>
    </body>
</html>
